<template>
    <div class="dashboard-container">
        <!-- 1. 数据卡片组 -->
        <data-cards /> 

        <el-row :gutter="20">
            <el-col :span="12">
                <!-- 2. 区域设备热力图 -->
                <heat-map />
            </el-col>
            <el-col :span="12">
            <!-- 3. 设备运行趋势图 -->
                <trend-chart />
            </el-col>
        </el-row>

    <!-- 4. 实时告警通知 -->
    <alarm-list />
  </div>
</template>

<script>
import DataCards from '@/components/dashboard/DataCards.vue'
import HeatMap from '@/components/dashboard/HeatMap.vue'
import TrendChart from '@/components/dashboard/TrendChart.vue'
import AlarmList from '@/components/dashboard/AlarmList.vue'

export default {
  name: 'Dashboard',
  components: {
    DataCards,
    HeatMap,
    TrendChart,
    AlarmList
  }
}
</script>
<style scoped>
.dashboard-container {
  width: 100%;
  height: 100%; /* 关键：占满父容器高度 */
  padding: 20px; /* 可保留内边距，但不要用margin */
  box-sizing: border-box; /* 确保padding不会撑大容器 */
}
</style>